@config.main("Search") {

    <style>
            .seq-title {
                display: flex;
                margin-bottom: 10px;
                align-items: baseline;
                padding-left: 15px;

            }

            .seq-title h5 {
                font-weight: bold;
                margin-right: 5px;
            }

    </style>

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Sequence Fetch")

            <div class="main-body">

                @components.navUlComponents(
                    Seq(("regions", "Sequence Fetch", rangeForm),
                        ("range", "Multiple Sequence Fetch", searchForm),
                    ), "regions")


                <div id="result" class="result">
                    <hr/>
                    <div class="seq-title">
                        <h5>Sequence:</h5>
                        <button class='btn my-btn' type='button' onclick='downloadSeq()' >Download</button>
                    </div>
                    <div class="form-control monospace" id="queryText" style="width: 1000px;
                        height: 450px;
                        overflow: auto"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("FileSaver.js-master/FileSaver.min.js")" type="text/javascript"></script>

    <script>

            $(function () {
                formValidation()
                getChr()

            })

            function getEg() {
                let species = $("#species").val()
                let example = species === "XJDY" ? "chr2.2:1-2000 chr2.3:2001-4000"
                        : species === "ZMNO" ? "Chr1:1-2000 Chr2:2001-4000"
                                : species === "MSAE" ? "Chr1:1-2000 Chr2:2001-4000"
                                        : species === "MTRU" ? "chr1:1-2000 chr2:2001-4000" : ""
                $(`#region`).val(example)
            }

            function getStart() {
                $("#start").val("1")
            }

            function getEnd() {
                $("#end").val("2000")
            }

            function getChr() {
                let species = $("#speciesRange").val()
                $.post("/alfalfa/search/getChr?species=" + species, (data) => {
                    $("#chr").empty().select2({data: data})
                })
            }

            function downloadSeq() {
                let fileName = "seq.fa";
                let content = $("#queryText").html().split("<br>").join("\n").split("&gt;").join(">")
                let blob = new Blob([content], {
                    type: "text/plain;charset=utf-8"
                });
                saveAs(blob, fileName)
            }



            function Search(formId) {
                let form = $("#" + formId)
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();
                    $.ajax({
                        url: "/alfalfa/search/seqFetch?formId=" + formId,
                        type: "post",
                        data: form.serialize(),
                        success: (data) => {
                            $("#queryText").html(data.fasta)
                            $result = $("#result")
                            $result.show();
                            layer.close(index)
                            let target_top = $result.offset().top ;
                            $("html,body").animate({scrollTop: target_top}, 800);
                        }
                    })
                }
            }

            function formValidation() {
                let queryText = {
                    validators: {
                        notEmpty: {
                            message: 'This is not be empty!'
                        }
                    }
                }
                let integer = {
                    validators: {
                        notEmpty: {
                            message: 'Word size is required！'
                        },
                        integer: {
                            message: 'Word size must be intger！'
                        }
                    }
                }
                $('#regionForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        region: queryText
                    }
                });
                $('#rangeForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        start: integer,
                        end: integer
                    }
                });

            }
    </script>
}


@searchForm = {
    <form class="registration-form col-sm-12 my-form" id="regionForm">

        @components.species()

        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">Region :</label>
            <div class="col-sm-9">
                <textarea class="form-control" type="text" rows="5" name="region" id="region"></textarea>
                <span  >
                    e.g.,&nbsp;<a href="####" onclick="getEg()"><em class="egCrics">Example</em></a></span>
            </div>
        </div>

        @components.button("regionForm")
    </form>
}

@rangeForm = {
    <form class="registration-form col-sm-12 my-form" id="rangeForm">

        @components.species(id = "speciesRange")

        @components.chr()

        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">Start Position:</label>
            <div class="col-sm-4" style="text-align: left">
                <input class="form-control" name="start" id="start">
            </div>
            <div class="col-sm-4" style="line-height: 40px">
                <span >
                    e.g.,&nbsp;<a href="####" onclick="getStart()"><em class="egCrics">1</em></a></span>
            </div>

        </div>

        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">End Position:</label>
            <div class="col-sm-4" style="text-align: left">
                <input class="form-control" name="end" id="end">
            </div>
            <div class="col-sm-4" style="line-height: 40px">
                <span  >
                    e.g.,&nbsp;<a href="####" onclick="getEnd()"><em class="egCrics">2000</em></a></span>
            </div>
        </div>

        @components.button("rangeForm")
    </form>
}
